<template>
  <div class="message-board">
    <mu-sub-header>留言板</mu-sub-header>
    <abstract-page ref="pager" :fetcher="getBoardMessages" pagin-position="bottom">
      <template #default="{ source, noData }">
        <div v-if="noData" class="message-board-list">
          <mu-flex justify-content="center">
            <span>暂时没有留言哦</span>
          </mu-flex>
        </div>
        <ul v-else class="message-board-list">
          <board-list-item
            v-for="item in source"
            :key="item.id"
            :message="item"
            @refresh="refresh"
          />
        </ul>
      </template>
    </abstract-page>

    <mu-sub-heade>发表留言</mu-sub-heade>
    <div class="board-input-box">
      <mu-text-field
        v-model="boardInput"
        full-width
        class="board-input-text"
        placeholder="留言大家都能看到，发言要规范哦！"
        multi-line
        :rows="3"
        :rows-max="10"
      ></mu-text-field>
    </div>
    <div class="board-input-submit">
      <mu-button color="success" full-width @click="submit()">确定</mu-button>
    </div>
  </div>
</template>

<script>
import AbstractPage from '@/components/AbstractPage'
import BoardListItem from './BoardListItem'
import api from '@/api'

export default {
  name: 'MessageBoard',
  components: {
    AbstractPage,
    BoardListItem
  },
  data() {
    return {
      boardInput: ''
    }
  },
  methods: {
    getBoardMessages(page) {
      return api.fetchBoardMessages(page)
    },
    // 刷新
    refresh() {
      this.$refs.pager.refresh()
    },
    async submit() {
      try {
        await api.createBoardMessage(this.boardInput)
        this.$toast.success('留言发表成功')
        this.boardInput = ''
        this.refresh()
      } catch (err) {
        this.$apiCatch(err)
      }
    }
  }
}
</script>

<style scoped>
.message-board {
  padding: 12px;
}
.message-board-list {
  list-style: none;
}
.board-input-submit {
  max-width: 500px;
  margin: 0 auto;
}
</style>
